import { FC } from 'react';

interface Props {
  strokeWidth?: number;
  sqSize?: number;
  percentage: number;
  className?: string;
  color?: string;
}

export const CircularProgressbar: FC<Props> = ({
  strokeWidth = 8,
  sqSize = 160,
  percentage,
  className,
}: Props) => {
  const radius = (sqSize - strokeWidth) / 2;
  const viewBox = `0 0 ${sqSize} ${sqSize}`;
  const dashArray = radius * Math.PI * 2;
  const dashOffset = dashArray - (dashArray * (percentage || 0)) / 100;

  return (
    <svg width={sqSize} height={sqSize} viewBox={viewBox} className={className} >
      <circle
        className='fill-none stroke-slate-300'
        cx={sqSize / 2}
        cy={sqSize / 2}
        r={radius}
        strokeWidth={`${strokeWidth}px`}
      />
      <circle
        className='fill-none stroke-black transition-all delay-300 ease'
        cx={sqSize / 2}
        cy={sqSize / 2}
        r={radius}
        strokeLinecap='round'
        strokeWidth={`${strokeWidth}px`}
        transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}
        style={{
          strokeDasharray: dashArray,
          strokeDashoffset: dashOffset,
        }}
      />
      <text
        x={sqSize / 2}
        y={sqSize / 1.83 + strokeWidth}
        textAnchor='middle'
        fill='black'
        fontSize={sqSize * 0.3}
      >{`${Math.floor(percentage)}%`}</text>
    </svg>
  );
};
